<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			.scrollBanner,.scrollBanner2{
				position: relative;
				overflow: hidden;
				width: 400px;
				height: 320px;
				margin: 0 auto;
			}
			.bannerBox,.bannerBox2{
				position: absolute;
				width: 2400px;
				height: 320px;
			}
			.bannerBox li,.bannerBox2 li{
				float: left;
			}
			.bannerBox li a,.bannerBox2 li a{
				font-size: 60px;
				font-weight: 900;
			}
			.bannerBox li a img,.bannerBox2 li a img{
				width: 400px;
				height: 320px;
				display: block;
			}
			.btn{
				display: inline-block;
				position: absolute;
				top: 50%;
				    width: 54px;
    			height: 56px;
    			margin-top: -28px;
				background: url('btn.gif') no-repeat;
				opacity: 0.5;
			}
			.btn:hover{
				cursor: pointer;
				opacity: 1;
			}
			.leftPrev,.leftPrev2{
				left: 10px;
				background-position: -7px top;
			}
			.rightNext,.rightNext2{
				right: 10px;
				background-position: left -62px;
			}
			.num,.num2{
				display: inline-block;
				position: absolute;
				bottom: 0;
				width: 100%;
    			height: 36px;
    			margin-top: -28px;
    			text-align: right;
    			background-color: rgba(123,123,123,0.8);
			}
			.num span,.num2 span{
				display: inline-block;
				width: 12px;
				background-color: #F18A00;
				height: 12px;
				margin-right: 6px;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				box-sizing: border-box;
			}
			.num span:hover,.current,.num2 span:hover{
				cursor: pointer;
				border: 2px solid #ffd;
			}
		</style>
	</head>
	<body>
		<div class="scrollBanner">
			<ul class="bannerBox">
				<li><a href="javascript:;"><img src="1.jpg" /></a></li>
				<li><a href="javascript:;"><img src="2.jpg" /></a></li>
				<li><a href="javascript:;"><img src="3.jpg" /></a></li>
				<li><a href="javascript:;"><img src="4.jpg" /></a></li>
				<li><a href="javascript:;"><img src="5.jpg" /></a></li>
				<li><a href="javascript:;"><img src="6.jpg" /></a></li>
			</ul>
			
			<a class="btn leftPrev" title="上一张"></a>
			<a class="btn rightNext" title="下一张"></a>
			<div class="num">
				<span class="current"></span>
				<span class=""></span>
				<span class=""></span>
				<span class=""></span>
				<span class=""></span>
				<span class=""></span>
			</div>
		</div>
		<div class="scrollBanner2">
			<ul class="bannerBox2">
				<li><a href="javascript:;"><img src="1.jpg" /></a></li>
				<li><a href="javascript:;"><img src="2.jpg" /></a></li>
				<li><a href="javascript:;"><img src="3.jpg" /></a></li>
				<li><a href="javascript:;"><img src="4.jpg" /></a></li>
				<li><a href="javascript:;"><img src="5.jpg" /></a></li>
				<li><a href="javascript:;"><img src="6.jpg" /></a></li>
			</ul>
			
			<a class="btn leftPrev2" title="上一张"></a>
			<a class="btn rightNext2" title="下一张"></a>
			<div class="num2">
				<span class="current"></span>
				<span class=""></span>
				<span class=""></span>
				<span class=""></span>
				<span class=""></span>
				<span class=""></span>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var duration;
			var playTime;
//			banner(".scrollBanner li",".bannerBox",".num",".leftPrev",".rightNext")
			banner({
				a : ".scrollBanner li",
				b : ".bannerBox",
				c : ".num",
				d : ".leftPrev",
				e : ".rightNext"
			});
			banner({
				a : ".scrollBanner2 li",
				b : ".bannerBox2",
				c : ".num2",
				d : ".leftPrev2",
				e : ".rightNext2"
			});
		});
		
		banner = function(one){
			
			var $newLi = $(one.a).eq(0).clone();
			$(one.b).append($newLi);
			var $oUL = $(one.b);
			var $oLIs = $oUL.children();
			var $oNavlist = $(one.c).children();
			var $prev = $(one.d);
			var $Next = $(one.e);
			var index = 0;
			var imgLenth = $oLIs.length - 1;
			function xtd(){
					$Next.on("click",function(){
					index++;
					if(index > imgLenth){
						index = 1;
						$oUL.css({"left":0+"px"})
					}
					move(index);
				})
				$prev.on("click",function(){
					index--;
					if(index < 0){
						index = 2;
						$oUl.css({"left":-(imgLength)*$oLIs.eq(0).width()+"px"})
					}
					move(index);
				})
				
				function move(index){
					$oUL.stop().animate({
						"left":index*(-$oLIs.eq(0).width())+"px"
					},100);
					$oNavlist.removeClass("current");
					$oNavlist.eq(index >= imgLenth?0:index).addClass("current");
				}
			}
			xtd()
		}
//		banner2 = function(){
//			var $newLi = $(".scrollBanner2 li").eq(0).clone();
//			$(".bannerBox2").append($newLi);
//			var $oUL = $(".bannerBox2");
//			var $oLIs = $oUL.children();
//			var $oNavlist = $(".num2").children();
//			var $prev = $(".leftPrev2");
//			var $Next = $(".rightNext2");
//			var index = 0;
//			var imgLenth = $oLIs.length - 1;
//			
//			$Next.on("click",function(){
//				index++;
//				if(index > imgLenth){
//					index = 1;
//					$oUL.css({"left":0+"px"})
//				}
//				move(index);
//			})
//			$prev.on("click",function(){
//				index--;
//				if(index < 0){
//					index = 2;
//					$oUl.css({"left":-(imgLength)*$oLIs.eq(0).width()+"px"})
//				}
//				move(index);
//			})
//			
//			function move(index){
//				$oUL.stop().animate({
//					"left":index*(-$oLIs.eq(0).width())+"px"
//				},100);
//				$oNavlist.removeClass("current");
//				$oNavlist.eq(index >= imgLenth?0:index).addClass("current");
//			}
//		}
	</script>
</html>
